/* Portfolio Page Layout */
.portfolio-page {
    padding: var(--space-xl) var(--space-m);
}

.page-header {
    text-align: center;
    margin-bottom: 1.2rem;
}

.page-header .section-subtitle {
    font-size: 1.1rem;
    color: var(--bronze-gray);
    max-width: 600px;
    margin: 0 auto;
}

/* Portfolio Gallery - Ancient Book Style */
.portfolio-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-l);
    margin-top: 0.2rem;
    margin-bottom: var(--space-xl);
}

.portfolio-item {
    perspective: 1000px;
    border-radius: 12px 24px 18px 18px/32px 32px 18px 18px;
    box-shadow: 0 4px 24px #b0a08433, 0 0 0 4px #fffbe6cc;
    border: 2.5px solid #b0a084;
    background: linear-gradient(120deg, #fffbe6 80%, #b0a084 100%);
    transition: box-shadow 0.28s, transform 0.22s cubic-bezier(.22,1.12,.56,1.08), border-color 0.22s;
}

.portfolio-item:hover .book-cover {
    transform: rotateY(20deg);
}

.portfolio-item:hover {
    box-shadow: 0 12px 48px #c23b2344, 0 0 0 8px #b0a08455;
    border-color: #c23b23;
    z-index: 2;
    transform: translateY(-6px) scale(1.04) rotate(-2deg);
}

.book-cover {
    width: 100%;
    height: 350px;
    background-color: #a0522d; /* Sienna color */
    background-image: url('../assets/images/texture-book-cover.jpg');
    background-size: cover;
    border: 2px solid #5c2c06;
    border-radius: 5px 15px 15px 5px;
    padding: var(--space-m);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--xuan-paper-white);
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 12px #b0a08433;
    border: none;
}

.book-title {
    writing-mode: vertical-rl;
    font-size: 1.8rem;
    letter-spacing: 5px;
    font-family: 'Ma Shan Zheng', '霞鹜文楷', 'Kaiti', cursive, serif;
    color: #fffbe6;
    text-shadow: 0 2px 0 #b0a084, 0 0 8px #3a5a6c44;
    -webkit-text-stroke: 1.2px #b0a084;
    text-stroke: 1.2px #b0a084;
    font-weight: bold;
    filter: drop-shadow(0 0 6px #b0a08444);
    letter-spacing: 0.22em;
    margin: 0 auto;
}

.book-dynasty {
    font-size: 1.2rem;
    align-self: flex-end;
}

/* Movable Type Section */
.movable-type-section {
    padding: var(--space-xl) 0;
    background: linear-gradient(120deg, #b0a084 60%, #3a5a6c 100%);
    border-top: 6px solid #b0a084;
    box-shadow: 0 -2px 16px #b0a08433;
    position: relative;
    z-index: 1;
}

.movable-type-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-m);
    padding: 1.2em 0 0.5em 0;
}

.movable-type {
    width: 80px;
    height: 80px;
    background: linear-gradient(120deg, #b0a084 60%, #fffbe6 100%), url('../assets/images/texture-movable-type.png');
    border: 2.5px solid #3a5a6c;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 12px #b0a08433, 0 0 0 4px #fffbe6cc;
    border-radius: 18px 18px 22px 22px/32px 32px 18px 18px;
    filter: drop-shadow(0 0 6px #b0a08444);
    position: relative;
    z-index: 2;
}

.movable-type span {
    font-size: 1.5rem;
    color: var(--xuan-paper-white);
    text-shadow: 1px 1px 2px #000;
    transform: scale(-1, 1); /* Mirror effect for movable type */
    font-family: var(--font-title);
    letter-spacing: 0.12em;
    filter: drop-shadow(0 0 4px #b0a08444);
}

.movable-type:hover {
    transform: translateY(-8px) scale(1.08) rotate(-3deg);
    box-shadow: 0 8px 32px #c23b2344, 0 0 0 8px #b0a08455;
    border-color: #c23b23;
    filter: drop-shadow(0 0 16px #c23b23cc) brightness(1.10);
}

.movable-type:active {
    transform: translateY(1px);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

.portfolio-main-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  color: var(--cinnabar-red);
  letter-spacing: 0.28em;
  text-shadow: 0 2px 0 #fffbe6, 0 0 16px #c23b2344, 0 0 32px #b0a08433;
  filter: drop-shadow(0 0 8px #c23b2344) brightness(1.08);
  padding: 0.5em 0 0.2em 0;
  margin: 0 auto 0.5em auto;
  border-bottom: 3px solid var(--cinnabar-red);
  border-radius: 0 0 18px 18px;
  background: linear-gradient(90deg, #fffbe6 60%, #f7f1e3 100%);
  box-shadow: 0 2px 12px #b0a08422;
  text-align: center;
  max-width: 420px;
  position: relative;
  z-index: 3;
}

.portfolio-subnav {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.6rem;
  padding: 0.8em 0 0.5em 0;
  background: none;
  position: relative;
  z-index: 3;
  margin-bottom: 0.2em;
}
.portfolio-subnav-btn {
  font-family: var(--font-title);
  font-size: 1.18rem;
  color: #3a5a6c;
  background: linear-gradient(120deg, #f7f1e3 60%, #b0a084 100%);
  border: 2.5px solid #b0a084;
  border-radius: 18px 18px 22px 22px/32px 32px 18px 18px;
  box-shadow: 0 2px 12px #b0a08433, 0 0 0 4px #fffbe6cc;
  padding: 0.5em 1.8em;
  margin: 0 0.1em;
  cursor: pointer;
  transition: box-shadow 0.28s, transform 0.22s cubic-bezier(.22,1.12,.56,1.08), color 0.22s, background 0.22s;
  position: relative;
  outline: none;
  user-select: none;
  filter: drop-shadow(0 0 6px #b0a08444);
}
.portfolio-subnav-btn:hover {
  color: var(--cinnabar-red);
  background: linear-gradient(120deg, #fffbe6 60%, #b0a084 100%);
  box-shadow: 0 8px 32px #c23b2344, 0 0 0 6px #b0a08455;
  transform: translateY(-4px) scale(1.07) rotate(-2deg);
  filter: drop-shadow(0 0 12px #c23b2344) brightness(1.10);
}
.portfolio-subnav-btn.active {
  color: #fffbe6;
  background: linear-gradient(120deg, #c23b23 60%, #b0a084 100%);
  box-shadow: 0 8px 32px #c23b2344, 0 0 0 8px #b0a08477;
  filter: drop-shadow(0 0 16px #c23b23cc) brightness(1.12);
  transform: scale(1.12);
  z-index: 2;
}
@media (max-width: 700px) {
  .portfolio-main-title { font-size: 2rem; max-width: 90vw; }
  .portfolio-subnav { gap: 0.6rem; }
  .portfolio-subnav-btn { font-size: 1rem; padding: 0.4em 1em; }
}

/* 夜间模式适配 */
body.night-mode .portfolio-item {
    background: linear-gradient(120deg, #232323 80%, #3a5a6c 100%);
    border-color: #3a5a6c;
    box-shadow: 0 4px 24px #3a5a6c55, 0 0 0 4px #b0a08433;
}
body.night-mode .portfolio-item:hover {
    box-shadow: 0 12px 48px #fffbe644, 0 0 0 8px #b0a08499;
    border-color: #fffbe6;
}
body.night-mode .book-title {
    color: #b0a084;
    text-shadow: 0 2px 0 #232323, 0 0 8px #fffbe644;
    -webkit-text-stroke: 1.2px #3a5a6c;
    text-stroke: 1.2px #3a5a6c;
}
body.night-mode .movable-type-section {
    background: linear-gradient(120deg, #232323 60%, #3a5a6c 100%);
    border-top: 6px solid #3a5a6c;
    box-shadow: 0 -2px 16px #3a5a6c55;
}
body.night-mode .movable-type {
    background: linear-gradient(120deg, #3a5a6c 60%, #232323 100%), url('../assets/images/texture-movable-type.png');
    border-color: #b0a084;
    box-shadow: 0 2px 12px #3a5a6c33, 0 0 0 4px #b0a08433;
}
body.night-mode .movable-type:hover {
    box-shadow: 0 8px 32px #fffbe644, 0 0 0 8px #b0a08499;
    border-color: #fffbe6;
    filter: drop-shadow(0 0 16px #fffbe655) brightness(1.08);
} 